<template>
  <div class="container">
    <div class="table-data">
      <el-card class="box-card">
        <el-row
          style="
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <el-col :span="10"> </el-col>

          <el-col :span="4" :offset="10" v-show="false">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>

        <el-table
          :data="dataShow"
          stripe
          border
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          @expand-change="toggleRowExpansion"
          style="width: 100%"
        >
          <!-- 详情 begin -->
          <el-table-column type="expand" align="left">
            <template slot-scope="">
              <el-form v-for="(item, index) in more" :key="index" inline label-position="right" size="mini">
                
                <el-form-item label="商品名称:">
                  <span>{{item.good_name}}</span>
                </el-form-item>
                <el-form-item label="商品单价:">
                  <span>{{item.price}}</span>
                </el-form-item>
                <el-form-item label="商品数量:">
                  <span>{{item.num}}</span>
                </el-form-item>
                <el-form-item label="商品总价:">
                  <span>{{item.money}}</span>
                </el-form-item>
                
                <el-form-item label="商品规格:" inline-message	>
    
                  <div v-for="(val,key,index) in item.sku" :key="index">

                    <div v-for="(val2,key2,index2) in item.sku[key]" :key="index2" >
                      <span v-if="index==0"><strong>{{key2}}: </strong><i>{{val2}}</i></span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="收货地址:" v-if="item.other">
                  <span>{{item.other.city}}--{{item.other.area}}--{{item.other.detailed}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <!-- 详情 end -->
          <el-table-column
            prop="order_id"
            label="订单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="nick_name"
            label="用户名"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="money"
            label="商品总价"
            align="center"
          ></el-table-column>
          <el-table-column
            width="160px"
            prop="create_time"
            label="支付时间"
            align="center"
            :formatter="timestampToTime"
          ></el-table-column>

          <el-table-column
            prop="status"
            :formatter="statusToStatus"
            label="订单状态"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="220px" align="center">
            <template slot-scope="scope">
              <el-button
                type="success"
                @click="sureorders(scope.$index, scope.row)"
                >确认订单</el-button
              >
              <el-button
                type="primary"
                @click="redactform(scope.$index, scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          hide-on-single-page
        >
        </el-pagination>
      </el-card>
    </div>

    <el-dialog
      title="订单状态修改"
      :append-to-body="true"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择更改订单状态">
            <el-option label="已发货" value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureform()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataShow: [],
      checkedrow: [],
      total: 1,
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      row: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        disabled: true,
      },
      name: {
        1: "未支付",
        2: "完成支付",
        3: "确认订单",
        4: "已发货",
        5: "已收货",
        6: "退款",
        7: "取消",
      },
      formLabelWidth: "120px",
      expands: [],
      more: [],
    };
  },

  methods: {
    getRowKeys(row) {
      return row.order_id;
    },
    //批量禁用
    banBatches() {
      this.checkedrow.forEach((item, index) => {
        this.userban(item.user_id);
      });
    },
    //每页显示条数
    handleSizeChange(e) {
      this.pageSize = e;
      this.show(e, 1);
    },
    //当前页变化
    handleCurrentChange(e) {
      // 多选
      this.show(this.pageSize, e);
    },
    handleSelectionChange(e) {
      //   console.log(e);
      this.checkedrow = e;
      //   console.log(this.checkedrow)
    },
    show(size, page) {
      this.$http
        .post("/api/admin/OrderList", {
          token: this.token,
          size: size,
          page: page,
        })
        .then((res) => {
          console.log(res);
          this.dataShow = res.data.data.data;
          this.total = res.data.data.count;
        });
    },
    //时间戳转换
    timestampToTime(row, column, index) {
      var date = new Date(index * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //真实姓名处理
    nameToName(row, column, index) {
      if (index == null || index == "") {
        return "暂无信息";
      } else {
        return index;
      }
    },
    //性别转换
    sexToSex(row, column, index) {
      if (index == 1) {
        return "男";
      } else if (index == 2) {
        return "女";
      } else if (index == "3") {
        return "暂无信息";
      }
    },
    //状态转换
    statusToStatus(row, column, index) {
      if (index == 1) {
        return "未支付";
      } else if (index == 2) {
        return "完成支付";
      } else if (index == 3) {
        return "确认订单";
      } else if (index == 4) {
        return "已发货";
      } else if (index == 5) {
        return "已收货";
      } else if (index == 6) {
        return "退款";
      } else if (index == 7) {
        return "取消";
      }
    },
    //编辑订单信息
    redactform(index, row) {
      this.row = row;
      (this.dialogFormVisible = true),
        (this.form.region = this.name[row.status]);
    },
    //确认订单
    sureorders(index, row) {
      if (row.status == 2) {
        this.$http
          .post("http://api_dev.wanxikeji.cn/api/admin/OrderStatusChange", {
            token: this.token,
            order_id: row.order_id,
            status: 3,
          })
          .then((res) => {
            this.show(10, 1);
          });
      } else {
        this.open1();
      }
    },
    //确认修改
    sureform() {
      //请求修改订单接口
      if (this.name[this.row.status] == this.form.region) {
        this.dialogFormVisible = false;
      } else if (this.row.status == 3) {
        this.$http
          .post("http://api_dev.wanxikeji.cn/api/admin/OrderStatusChange", {
            token: this.token,
            order_id: this.row.order_id,
            status: 4,
          })
          .then((res) => {
            this.dialogFormVisible = false;
            this.show(10, 1);
          });
        this.open2();
      } else {
        this.open3();
      }
    },
    //警告框
    open3() {
      this.$message({
        message: "请先确认订单",
        type: "warning",
      });
    },
    //成功框
    open2() {
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    //已发货框
    open1() {
      this.$message({
        message: "该订单已完成",
        type: "success",
      });
    },
    // 获取行id

    // 订单详情

    toggleRowExpansion(row) {
      this.more = [];
      this.$http
        .post("http://api_dev.wanxikeji.cn/api/admin/orderInfo", {
          token: this.token,
          order_id: row.order_id,
        })
        .then((res) => {
          console.log(res.data.data);
          var data=res.data.data;
          if(data.length > 0){
            data[0].other = res.data.other;
          }
          
          data.forEach((item,index)=>{
            console.log(JSON.parse(item.sku)[0]);
            data[index].sku=JSON.parse(item.sku)[0];
          })
          // data.sku=JSON.parse(data.sku);
          this.more = data;
          if (this.expands[0] == row.order_id) {
            this.expands = [];
          } else {
            this.expands = [];
            this.expands.push(row.order_id);
          }
        });

      console.log(row);
    },
  },
  mounted() {
    //加载用户列表
    this.token = sessionStorage.getItem("token");
    this.show(10, 1);
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table__body-wrapper {
  font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data {
    padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /deep/.el-form-item__label {
    width: 80px !important;
    
  }
  /deep/.el-input {
    width: 98%;
  }
  /deep/ .el-form-item--mini{
    margin: 0;
  }
  /deep/ .el-form--inline{
    margin-bottom: 20px;
    font-size: 12px;
    // opacity: .6;
    color: #979797;
  }
  /deep/ .el-form--inline:last-of-type{
    margin-bottom: 0;
  }
}
</style>